import { html, reactive, NE } from 'nvagir'
import { delTodoModal } from '../../components/DelModal'
import { editTodoModal } from '../../components/TodoModal'

enum TodoType {
  ed = 'ed',
  ing = 'ing',
}

const TodoBar = (backClickPlan: VoidFunction, addTodo: VoidFunction) => {
  const { el } = html`
    <div class="bar">
      <span class="back show-phone" n@click=${backClickPlan}
        ><i class="iconfont">&#xe60a;</i></span
      >
      <span n@click=${addTodo}><i class="iconfont">&#xe60c;</i></span>
    </div>
  `
  const component: NE<'TodoBar'> = { name: 'TodoBar', el }
  return component
}

const TodoItem = (
  todo: Todo,
  forceReRender: VoidFunction,
  edit: (o: Todo, n: Todo) => void,
  del: (t: Todo) => void,
) => {
  const data = {
    todo,
  }

  const completedChange = () => {
    data.todo.completed = !data.todo.completed
    forceReRender()
  }

  const editTodo = () => {
    editTodoModal({
      todo: data.todo,
      onClose() {
        console.log('关闭了')
      },
      onConfirm(todo) {
        edit(data.todo, todo)
      },
    })
  }

  const delTodo = () => {
    delTodoModal({
      onClose() {
        console.log('关闭了')
      },
      onConfirm() {
        del(todo)
      },
    })
  }

  const { el } = html`
    <li class="event ${todo.completed ? 'finish' : ''}">
      <div class="left">
        <input
          class="balloon"
          type="checkbox"
          balloon-data="${todo.completed ? 'todo' : 'finished'}"
          ${todo.completed ? 'checked' : ''}
          n@click=${completedChange}
        />
      </div>
      <div class="right">
        <h2 class="title">${todo.title}</h2>
        <p class="desc">${todo.desc}</p>
      </div>
      <div class="event-op">
        <span class="edit">
          <i class="iconfont" n@click=${editTodo}>&#xe73c;</i>
        </span>
        <span class="del">
          <i class="iconfont" n@click=${delTodo}>&#xe620;</i>
        </span>
      </div>
    </li>
  `
  const component: NE<'TodoItem'> = { name: 'TodoItem', el }
  return component
}

const TodoList = (
  list: Array<Todo>,
  type: TodoType,
  forceReRender: VoidFunction,
  editTodo: (o: Todo, n: Todo) => void,
  delTodo: (t: Todo) => void,
) => {
  const data = {
    showTodo: true,
  }

  const toggle = () => {
    proxyData.showTodo = !proxyData.showTodo
  }

  let todos = []
  if (type == TodoType.ed) {
    todos = list.filter(item => item.completed)
  } else {
    todos = list.filter(item => !item.completed)
  }

  const { el, doms } = html<{
    listContainer: HTMLElement
    btn: HTMLElement
  }>`
    <div class="todo-list ${todos.length ? '' : 'hidden'}">
      <h1>
        <span n@click=${toggle}>
          <i class="iconfont" n@name="btn"> &#xe619; </i>
        </span>
        ${type}
      </h1>
      <ul n@name="listContainer">
        ${todos.map(todo => TodoItem(todo, forceReRender, editTodo, delTodo))}
      </ul>
    </div>
  `

  const proxyData = reactive(data, (p, data) => {
    switch (p) {
      case 'showTodo':
        if (data.showTodo) {
          doms.listContainer.classList.remove('hidden')
          doms.btn.innerHTML = '&#xe619;'
        } else {
          doms.listContainer.classList.add('hidden')
          doms.btn.innerHTML = '&#xe61a;'
        }
    }
  })

  const component: NE<'TodoList'> = { name: 'TodoList', el }
  return component
}

const TodoContainer = (
  list: Array<Todo>,
  forceReRender: VoidFunction,
  editTodo: (o: Todo, n: Todo) => void,
  delTodo: (t: Todo) => void,
) => {
  const { el } = html<{}>`
    <div class="main">
      ${[TodoList(list, TodoType.ing, forceReRender, editTodo, delTodo)]}
      ${[TodoList(list, TodoType.ed, forceReRender, editTodo, delTodo)]}
    </div>
  `
  const component: NE<'TodoContainer'> = { name: 'TodoContainer', el }
  return component
}

const ProgressView = (progress: number) => {
  const { el } = html`
    <div class="progress-wrap">
      <span style="width:${progress}%;">
        <span class="progress"></span>
      </span>
      <span class="text">当前进度${progress}%</span>
    </div>
  `
  const component: NE<'ProgressView'> = { name: 'ProgressView', el }
  return component
}

const StudyPlanRight = (
  list: Array<Todo>,
  per: number,
  forceReRender: VoidFunction,
  backClickPlan: VoidFunction,
  addTodo: VoidFunction,
  editTodo: (o: Todo, n: Todo) => void,
  delTodo: (t: Todo) => void,
) => {
  const { el } = html`
    <div class="study-plan-right hidden-phone ">
      ${TodoBar(backClickPlan, addTodo)}
      ${TodoContainer(list, forceReRender, editTodo, delTodo)}
      ${ProgressView(per)}
    </div>
  `
  const component: NE<'StudyPlanRight'> = { name: 'StudyPlanRight', el }
  return component
}

export default StudyPlanRight
